<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    table {
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #99a9bf;
        padding: 4px 10px;
        text-align: center;
    }

    .stu {
        width: 300px;
        height: 200px;
        background-color: #fff;
        border: 1px solid saddlebrown;
        padding: 20px;
        position: absolute;
        left: 100px;
        top: 200px;
    }
</style>
<body>
<div id="app">
<!--  添加学生  -->
    <button style="margin:20px 0" @click="show=true;isAdd=true">添加学生</button>
<!-- 弹出 添加学生的提示框 -->
    <div class="stu" v-show="show">
        <p><label>姓名：</label><input v-model="username"></p>
        <p><label>年龄：</label><input v-model="age"></p>
        <p><label>性别：</label><input v-model="sex"></p>
        <p>
            <button @click="add" v-if="isAdd">添加</button>
            <button @click="up(id)" v-else>修改</button>
            <button @click="show=false">关闭</button>
        </p>
    </div>

<!--  页面上渲染的学生表格  -->
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th style="width: 50px">操作</th>
            <th style="width: 50px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in userList">
            <td>{{item.username}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>
                <button @click="update(item.id)">修改</button>
            </td>
            <td>
                <!--      点击在表格中删除一条记录          -->
                <button @click="del(i)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                isAdd: true,
                //添加面板是否显示
                show: false,
                username: '',
                age: "",
                sex: '',
                id:0,
                //定义三个变量
                //定义一个数组
                userList: [{
                    id: 1,
                    username: 'TOM',
                    age: '30',
                    sex: '男'
                },
                    {
                        id: 2,
                        username: 'JASON',
                        age: '30',
                        sex: '女'
                    }]
            }
        },
        methods: {
            // 点击删除 列表中的一条记录
            del(i) {
                // 利用数组的splice方法
                this.userList.splice(i, 1)
            },

            // 关闭弹出框 并清空里面的输入内容
            close() {
                this.username = "";
                this.age = 0;
                this.sex = "";
                this.show = false;
            },
            // 打开弹出框 在列表中添加数据 点击添加 数据加载到 vue对象的 数据列表中  双向传输  显示在页面上{{}}
            add() {
                this.userList.push({
                    id: parseInt(Math.random() * 100 + 1),
                    //    返回1-100之间的整数
                    username: this.username,
                    age: this.age,
                    sex: this.sex
                })
                //    添加成功后 调用关闭方法
                    this.close();  // 调用vue对象的close方法关闭弹框
            },
            //显示修改面板的方法
            update(id) {
                // console.log(id);
                this.show = true;
                this.isAdd = false;
                //    获取需要修改的对象 查找 r 并且r.id = id
                let user = this.userList.find(r => r.id == id);
                // vue双向绑定 只要把值给了变量在页面中立马显示 mvvm架构
                this.username = user.username; // vue对象的username变量属性等于查到的user对象的username值
                this.age = user.age;
                this.sex = user.sex;
                this.id=user.id;
            },
            //    修改数据的方法
            up(id) {
                // console.log(id)
                let user = this.userList.find(r => r.id == id);
                // vue双向绑定 只要把值给了变量在页面中立马显示 mvvm架构
                user.username = this.username;
                user.age = this.age;
                user.sex = this.sex;
                user.id = this.id;
                this.close();
            }
        },
    })
</script>
</body>
</html>